<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/pages/common/component.jsp"%>
<html>
<head>
<title>报表</title>

<script type="text/javascript">

var piechartOptions = 
{
	chart: {
		renderTo: '',
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		width: 450,
		height: 250
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
				}
			},
			point: {
             	events : {   
                	click : function(){//绑定饼图每个子节点的click事件   
						
                   	}
            	}
          	}   
		}
	},
    series: [{
		type: 'pie',
		name: 'Browser share',
		data: [] 
		}]
};	

$(document).ready(function(){
	var chartType = '<%=request.getParameter("chartType")%>';
	var feeTypeId = '<%=request.getParameter("feeTypeId")%>';
	var startDate = '<%=request.getParameter("startDate")%>';
	var endDate = '<%=request.getParameter("endDate")%>';
	// 获取子类消费Pie
  	$.ajax({   
	    type: "POST",
	    url: "chartAction.do",
	    data: "method=getSubPie&chartType="+chartType+"&feeTypeId="+feeTypeId+"&startDate="+startDate+"&endDate="+endDate,
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
			piechartOptions.title.text = json.title+' 细类支出';
			piechartOptions.subtitle.text = json.subtitle;
			piechartOptions.series[0].data = json.data;
			piechartOptions.chart.renderTo='sub_pie_container';
			new Highcharts.Chart(piechartOptions);
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
});

</script>
</head>
<body style="vertical-align:middle;">

<div id="sub_pie_container"  style="width: 450px; height: 250px; "></div>
</body>
</html>